<template>
    <div :id="id" :style="style"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        style: {
            type: Object,
            required: true
        },
        option: {
           type: Object,
            required: true 
        }  
    },
    data() {
        return {
            id:'chart_'+Math.random()+'_'+Date.now()
        }
    },
    watch: {
        option: {
            deep: true,
            handler(newV,oldV) {
                if(this.chart)this.chart.setOption(newV,true,true); 
            }
        },
        style: {
            deep: true,
            handler(newV,oldV) {
                this.draw();
            } 
        }
    },
    methods: {
        draw() {
            this.chart = echarts.init(document.getElementById(this.id));
            this.chart.setOption(this.option,true,true);
       } 
    },
    mounted() {
        this.draw()
    }
}
</script>

<style></style>